<template>
  <div class="transaction-container">
    <!-- 页面头部 -->
    <div class="header-section">
      <div class="header-left">
        <div class="status-filter">
          <el-select
            v-model="filterStatus"
            placeholder="筛选状态"
            clearable
            size="small"
          >
            <el-option
              v-for="(item, key) in statusOptions"
              :key="key"
              :label="item.label"
              :value="key"
            />
          </el-select>
        </div>
      </div>
    </div>

    <!-- 交易表格 -->
    <el-table
      :data="filteredData"
      border
      size="small"
      class="transaction-table"
      v-loading="loading"
      :height="tableHeight"
    >
      <el-table-column type="index" width="50" align="center"/>
      <el-table-column label="订单号" prop="orderId" show-overflow-tooltip/>
      <el-table-column label="商家名称" prop="merchantName" width="120"/>
      <el-table-column label="用户名" prop="userName" width="80"/>
      <el-table-column label="商品信息" prop="productName" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="product-list">
            <span v-for="(item, index) in scope.row.productName.split(',')" :key="index">
              {{ item }}
              <br v-if="(index + 1) % 2 === 0"/>
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="数量" prop="quantity" width="80" align="right"/>
      <el-table-column label="总金额" width="120" align="right">
        <template slot-scope="scope">
          <span class="money">{{ formatPrice(scope.row.totalPrice) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="交易时间" prop="transactionDate" width="180" align="center">
        <template slot-scope="scope">
          {{ formatDate(scope.row.transactionDate) }}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100" align="center">
        <template slot-scope="scope">
          <el-tag
            :type="statusMap[scope.row.status].type"
            :size="statusMap[scope.row.status].size"
          >{{ statusMap[scope.row.status].label }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="viewDetails(scope.row)"
          >查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.length"
        class="left-pagination"
      />
    </div>

    <!-- 详情对话框 -->
    <el-dialog :visible.sync="dialogVisible" title="订单详情" :modal="false" :close-on-escape="false">
      <merchant-order :id="currentOrder" @back="parentMethod"/>
    </el-dialog>

  </div>
</template>

<script>
import { getMerchantTransactions } from '../../../api/list/products'
import MerchantOrder from './merchantOrder.vue'

export default {
  name: 'merchantTransactions',
  components: { MerchantOrder },
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      filterStatus: '',
      currentPage: 1,
      pageSize: 10,
      dialogVisible: false,
      currentOrder: null,
      // 状态映射表
      statusMap: {
        0: { label: '待支付', type: 'warning', size: 'small' },
        1: { label: '已支付', type: 'success', size: 'small' },
        2: { label: '已发货', type: 'primary', size: 'small' },
        3: { label: '已完成', type: 'info', size: 'small' },
        4: { label: '已取消', type: 'danger', size: 'small' },
        5: { label: '退款中', type: 'warning', size: 'small' },
        6: { label: '已退款', type: 'danger', size: 'small' }
      },
      // 状态筛选选项
      statusOptions: {
        0: { label: '待支付' },
        1: { label: '已支付' },
        2: { label: '已发货' },
        3: { label: '已完成' },
        4: { label: '已取消' },
        5: { label: '退款中' },
        6: { label: '已退款' }
      },
      data: [],
      tableHeight: '300px'
    }
  },
  watch: {
    id(newVal) {
      if (newVal) this.merchantTransactions()
    }
  },
  mounted() {
    this.merchantTransactions()
  },
  computed: {
    // 过滤后的数据
    filteredData() {
      if (!this.filterStatus && this.filterStatus !== 0) {
        return this.data
      }
      return this.data.filter(item => item.status === parseInt(this.filterStatus))
    }
  },
  methods: {
    merchantTransactions() {
      return getMerchantTransactions(this.id)
        .then((response) => {
          this.data = response.data
        })
        .catch((error) => {
          this.$message.error('获取商家信息失败')
        })
    },
    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return ''
      return dateStr.replace(' ', '  ')
    },

    // 格式化价格
    formatPrice(price) {
      return '¥' + price.toLocaleString()
    },

    // 解析商品列表
    parseProducts(productStr) {
      if (!productStr) return []
      return productStr.split(',').map(item => {
        const [name, quantity] = item.split('*')
        return { name, quantity }
      })
    },

    // 查看详情
    viewDetails(row) {
      this.currentOrder = row.orderId
      this.dialogVisible = true
    },

    // 分页相关方法
    handleSizeChange(val) {
      this.pageSize = val
    },

    handleCurrentChange(val) {
      this.currentPage = val
    },
    parentMethod() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
/* 基础样式 */
$primary-color: #409EFF;
$success-color: #67C23A;
$warning-color: #E6A23C;
$danger-color: #F56C6C;
$info-color: #909399;

.transaction-container {
  padding: 24px;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

.header-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 24px;

  .header-left {
    display: flex;
    align-items: center;
    gap: 16px;

    .status-filter {
      width: auto;
    }
  }
}

.transaction-container {
  padding: 24px;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

.header-section {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 24px;
}

.transaction-table {
  margin-bottom: 24px;
  min-height: 300px;
  border-radius: 8px;
  overflow: hidden;

  .el-table__header-wrapper {
    background-color: #f8f9fa;
  }
}

/* 分页样式调整 */
.pagination-container {
  margin-top: 24px;
  display: flex;

  .el-pagination {
    justify-content: flex-start !important; /* 强制左对齐 */
    padding: 12px;
    background-color: #ffffff;
    border-radius: 8px;
    width: fit-content;
  }
}


/* 详情对话框样式 */
.dialog-content {
  padding: 24px;
  line-height: 1.6;

  .detail-row {
    display: flex;
    margin-bottom: 20px;

    .detail-label {
      width: 100px;
      color: #4a4a4a;
      font-weight: 500;
    }

    .detail-value {
      flex: 1;
      color: #333;
    }
  }

  .product-title {
    font-size: 16px;
    color: #303133;
    margin-top: 30px;
    border-top: 1px solid #e4e7ed;
    padding-top: 20px;
    margin-bottom: 15px;
  }

  .total-row {
    margin-top: 20px;
    font-weight: bold;

    .total-amount {
      color: $primary-color;
      font-size: 18px;
    }
  }
}
</style>
